<template>
	<view class="content">
		<view class="header">
			<image src="../../static/shilu-login/logo.png"></image>
		</view>

		<view class="list">
			<!-- 手机号输入框 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/1.png"></image>
				<input class="sl-input" v-model="userphone" type="number" maxlength="11" placeholder="手机号" />
			</view>

			<!-- 用户姓名输入框 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/4.png"></image>
				<input class="sl-input" v-model="username" type="text" maxlength="12" placeholder="用户姓名" />
			</view>

			<!-- 身份证号输入框 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/5.png"></image>
				<input class="sl-input" v-model="useridcard" type="text" maxlength="18" placeholder="身份证号" />
			</view>
			
			<!-- 邮箱输入框 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/8.png"></image>
				<input class="sl-input" v-model="useremail" type="text" maxlength="18" placeholder="邮箱号" />
			</view>

			<!-- 出生日期选择器 -->
			<view class="list-call" @click="show = true">
				<image class="img" src="/static/shilu-login/6.png"></image>
				<text class="sl-input">{{ formattedBirthday || '选择出生日期' }}</text>
			</view>
			<u-datetime-picker :show="show" v-model="userbirthday" mode="date" @confirm="handleDateConfirm"
				@close="handleDateClose" @cancel="handleDateCancel"></u-datetime-picker>

			<!-- 性别选择器 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/7.png"></image>
				<picker class="sl-input" mode="selector" :range="genderOptions" v-model="selectedGender"
					@change="handleGenderChange">
					<view>{{ selectedGenderText || '选择性别' }}</view>
				</picker>
			</view>

			<!-- 登录密码输入框 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="登录密码"
					:password="!showPassword" />
				<image class="img" :src="showPassword ? '/static/shilu-login/op.png' : '/static/shilu-login/cl.png'"
					@tap="display"></image>
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="newpassword" type="text" maxlength="32" placeholder="确定密码"
					:password="!shownewPassword" />
				<image class="img" :src="shownewPassword ? '/static/shilu-login/op.png' : '/static/shilu-login/cl.png'"
					@tap="newdisplay"></image>
			</view>

			<!-- 手机验证码输入框 -->
			<view class="list-call">
				<image class="img" src="/static/shilu-login/3.png"></image>
				<input class="sl-input" v-model="code" type="number" maxlength="6" placeholder="手机验证码" />
				<!-- 	<view class="yzm"  :class="{ yzms: second > 0 }" @tap="getcode">{{ yanzhengma }}</view> -->
				<button @click="getcode" :disabled="isSending" class="yzm">
					{{ isSending ? countdown + '秒后重试' : '发送验证码' }}
				</button>
			</view>

		</view>

		<!-- 注册按钮 -->
		<view class="button-login" hover-class="button-hover" @tap="bindLogin">
			<text>注册</text>
		</view>

		<!-- 协议 -->
		<view class="agreement">
			<image @tap="agreementSuccess"
				:src="agreement ? '/static/shilu-login/ty1.png' : '/static/shilu-login/ty0.png'">
			</image>
			<text @tap="agreementSuccess"> 同意</text>
			<navigator url="agreement?id=1" open-type="navigate">《软件用户协议》</navigator>
		</view>
	</view>
</template>

<script>
	import {
		CodeMessage,	
		reg,
	} from "@/api/user.js"
import { data } from "../../uni_modules/uview-ui/libs/mixin/mixin";
	export default {
		data() {
			return {
				countdown: 60,
				isSending: false,
				newpassword: '',
				shownewPassword: false,
				userphone: '',
				username: '',
				useridcard: '',
				useremail:'',
				userbirthday: '',
				password: '',
				code: '',
				agreement: true,
				showPassword: false,
				second: 0,
				show: false,
				selectedGender: '', // 默认选择第一个性别
				genderOptions: ['男', '女'], // 性别选项
			};
		},
		computed: {
			selectedGenderText() {
				return this.genderOptions[this.selectedGender] || '选择性别';
			},
			yanzhengma() {
				if (this.second == 0) {
					return '获取验证码';
				} else {
					return this.second == 0 ? '重新获取0' + this.second : '重新获取' + this.second;
				}

			},
			formattedBirthday() {
				if (!this.userbirthday) return '';
				const date = new Date(this.userbirthday);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		},
		methods: {
			handleDateConfirm() {
				this.show = false; // 选择日期后隐藏日期选择器
			},
			handleDateClose() {
				this.show = false; // 关闭日期选择器
			},
			handleDateCancel() {
				this.show = false; // 取消日期选择器
			},
			clear() {
				clearInterval(js);
				this.second = 0;
			},
			display() {
				this.showPassword = !this.showPassword; // 显示/隐藏密码
			},
			newdisplay() {
				this.shownewPassword = !this.shownewPassword;
			},
			agreementSuccess() {
				this.agreement = !this.agreement; // 同意/不同意协议
			},
			getcode() {
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.userphone)) {
					this.$u.toast('请输入有效的手机号');
					return ;
				}
				this.isSending = true;
				this.countdown = 60; // 重置倒计时
				var data={number:this.userphone}
				CodeMessage(data).then(res => {
					if (res.message == "success") {
						uni.showToast({
							type: 'success',
							title: '发送成功',
							icon: 'none',
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						});
					}
				}).catch(err => {
					
				})
				this.startCountdown();
				

	
			},
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
				
					} else {
						this.stopCountdown();
					}
				}, 1000);
			},

			// 停止倒计时
			stopCountdown() {
				clearInterval(this.timer);
				this.timer = null;
				this.isSending = false;
			},
			validateForm() {
				// 手机号验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.userphone)) {
					this.$u.toast('请输入有效的手机号');
					return false;
				}
				
				// 姓名验证
				const nameRegex = /^[\u4e00-\u9fa5a-zA-Z]+$/;
				if (!nameRegex.test(this.username)) {
					this.$u.toast('用户名只能包含中文或字母');
					return false;
				}

				// 身份证号验证
				const idcardRegex = /^[1-9]\d{5}(18|19|20)\d{9}(X|\d)$/;
				if (!idcardRegex.test(this.useridcard)) {
					this.$u.toast('请输入有效的身份证号');
					return false;
				}
				
				// 邮箱验证
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (!emailRegex.test(this.useremail)) {
				  this.$u.toast('请输入有效的邮箱地址');
				  return false;
				}

				// 密码验证
				const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[A-Za-z\d]{6,32}$/;
				if (!passwordRegex.test(this.password)) {
					this.$u.toast('密码应包含字母和数字，且长度6-32位');
					return false;
				}

				// 校验通过
				return true;
			},
			bindLogin() {
				if (this.validateForm()) {
					if(this.password==this.newpassword){
						if(this.code.length<1){
							uni.showToast({
								type: 'error',
								icon: 'none',
								title: '验证码不能为空'
							});
						}else{
						var data={
								userPhone:this.userphone,
								userName:this.username,
								userIdcard:this.useridcard,
								userBirthday:this.formattedBirthday,
								userSex:this.selectedGender,
								userPassword:this.password,
								userEmail:this.useremail,
								code:this.code,
								}
							reg(data).then(res=>{
								if(res.message=="手机号已存在"){
									uni.showToast({
										type: 'error',
										icon: 'none',
										title: '手机号已存在'
									});
								}else if(res.message=="身份证号已存在"){
									uni.showToast({
										type: 'error',
										icon: 'none',
										title: '身份证号已存在'
									});
									}else if(res.message=="邮箱已存在"){
										uni.showToast({
											type: 'error',
											icon: 'none',
											title: '邮箱已存在'
										});
								}else if(res.message=="成功"){
									uni.showToast({
										type: 'error',
										icon: 'none',
										title: '注册成功'
									});
								}else if(res.message=="false"){
									uni.showToast({
										type: 'error',
										icon: 'none',
										title: '验证码已过期'
									});
								}else if(res.message=="false1"){
									uni.showToast({
										type: 'error',
										icon: 'none',
										title: '验证码错误'
									});
								}else {
									uni.showToast({
										type: 'error',
										icon: 'none',
										title: '注册失败'
									});
								}
								
							}).catch(res=>{
								
							})
							// 打印用户注册数据
							console.log("手机号:", this.userphone);
							console.log("用户名:", this.username);
							console.log("身份证号:", this.useridcard);
							console.log("出生日期:", this.formattedBirthday);
							console.log("性别:", this.selectedGender);
							console.log("密码:", this.password);
							console.log("验证码:", this.code);
							}
						}else{
						uni.showToast({
							type: 'error',
							icon: 'none',
							title: '密码不一致'
						});
					}
					}
					
			},
			handleGenderChange(event) {
				const gender = this.genderOptions[event.detail.value]; // 获取用户选择的性别文本
				this.selectedGender = gender === '男' ? '0' : '1';
			}
		}
	};
</script>



<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 70rpx;
		padding-right: 70rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #333333;
		border-bottom: 0.5px solid #e2e2e2;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.yzm {
		color: #FF7D13;
		font-size: 24rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: auto;
		height: 64rpx;
		border: 1rpx solid #FFA800;
		border-radius: 50rpx;
	}

	.yzms {
		color: #999999 !important;
		border: 1rpx solid #999999;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreement image {
		width: 40rpx;
		height: 40rpx;
	}
</style>